@import "./common/mixin.scss";
@import "./common/vars.scss";
@import "./common/utils.scss";
@import "./common/_button.scss";

@include module(button) {
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  background-color: $--button-default-bg-color;
  border: solid 1px $--button-default-border-color;
  color: $--button-default-font-color;
  font-weight: $--button-font-weight;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  @include utils-user-select(none);
  transition: all 0.2s ease;

  & + & {
    margin-left: 10px;
  }

  & > span > i[class^="el-icon-"] + span {
    margin-left: 5px;
  }

  @include button-size(
    $--button-default-padding-vertical,
    $--button-default-padding-horizontal,
    $--button-default-font-size,
    $--button-default-border-radius
  );
  &:focus,
  &:hover {
    background-color: $--color-primary-light-9;
    border-color: $--color-primary-light-3;
    color: $--color-primary-light-2;
  }

  &:active {
    background-color: $--color-primary-light-8;
    border-color: mix(
      $--color-black,
      $--color-primary-light-3,
      $--button-active-percent
    );
    color: mix($--color-black, $--color-primary, $--button-active-percent);
  }

  @include when(disabled) {
    &,
    &:hover,
    &:focus,
    &:active {
      cursor: not-allowed;
      background-color: $--color-white;
      border-color: $--button-disabled-border-color;
      color: $--button-disabled-font-color;
    }
  }

  @include when(active) {
    background-color: $--color-primary-light-8;
    border-color: mix(
      $--color-black,
      $--color-primary-light-3,
      $--button-active-percent
    );
    color: mix($--color-black, $--color-primary, $--button-active-percent);
  }

  @include when(circle) {
    border-radius: 50%;
    padding: $--button-default-padding-vertical;
    &.as-button--small {
      font-size: $--button-small-font-size;
      padding: $--button-small-padding-vertical;
    }
    &.as-button--mini {
      font-size: $--button-mini-font-size;
      padding: $--button-mini-padding-vertical;
    }
    &:hover,
    &:focus,
    &:active {
      border-radius: 50%;
    }
  }

  @include when(round) {
    border-radius: $--border-radius-circle;
  }

  @include when(dashed) {
    border-style: dashed;
  }

  @include modifier(text) {
    &,
    &:hover,
    &:active,
    &:focus {
      i,
      span {
        font-weight: bold;
      }
      background-color: transparent;
      border-color: transparent;
      padding: $--button-default-padding-vertical 0;
    }
    &:hover {
      color: mix($--color-white, $--color-primary, $--button-hover-percent);
    }

    &:active {
      color: mix($--color-black, $--color-primary, $--button-active-percent);
    }

    &.is-disabled {
      &,
      &:hover,
      &:active,
      &:focus {
        background-color: transparent;
        border-color: transparent;
        padding: $--button-default-padding-vertical 0;
      }
    }

    color: $--color-primary;

    &.as-button--text {
      &,
      &:focus,
      &:hover {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  @include modifier(primary) {
    @include button-type(
      $--button-primary-font-color,
      $--button-primary-bg-color,
      $--button-primary-border-color
    );
  }

  @include modifier(success) {
    @include button-type(
      $--button-success-font-color,
      $--button-success-bg-color,
      $--button-success-border-color
    );
  }

  @include modifier(warning) {
    @include button-type(
      $--button-warning-font-color,
      $--button-warning-bg-color,
      $--button-warning-border-color
    );
  }

  @include modifier(danger) {
    @include button-type(
      $--button-danger-font-color,
      $--button-danger-bg-color,
      $--button-danger-border-color
    );
  }

  @include modifier(info) {
    @include button-type(
      $--button-info-font-color,
      $--button-info-bg-color,
      $--button-info-border-color
    );
  }

  @include modifier(small) {
    @include button-size(
      $--button-small-padding-vertical,
      $--button-small-padding-horizontal,
      $--button-small-font-size,
      $--button-small-border-radius
    );
  }

  @include modifier(mini) {
    @include button-size(
      $--button-mini-padding-vertical,
      $--button-mini-padding-horizontal,
      $--button-mini-font-size,
      $--button-mini-border-radius
    );
  }
}
